<!--  -->
<template>
  <div id="card">
    <div class="card-container">
      <div class="card-head">
        <div class="card-head-pic">
          <img src="../../../public/static/testimg/testimg.jpeg" />
        </div>
        <span>{{ cardData.title }}</span>
        <div class="card-head-op">
          <span class="card-head-op-left">+加入</span>
          <span>199999999</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},

  props: ["cardData"],

  computed: {},

  methods: {},
};
</script>
<style>
#card {
  width: 300px;
  height: 165px;
  padding: 5px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(18, 18, 18, 0.1);
  margin: 5px;
  animation: name duration timing-function delay iteration-count direction
    fill-mode;
}
.card-head {
  width: 100%;
  height: 30px;
  border-bottom: 1px rgb(240, 240, 240) solid;
  padding: 15px 2px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.card-head-pic {
  width: 30px;
  height: 30px;
  border-radius: 2px;
  overflow: hidden;
  margin-left: 10px;
}
.card-head-pic > img {
  object-fit: cover;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.card-head > span {
  font-size: 16px;
  font-weight: 500;
  width: 160px;
  padding: 10px 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 0 160px;
}
.card-head-op {
  width: 80px;
  height: 20px;
  margin-right: 5px;
  border: 1px rgb(240, 240, 240) solid;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-head-op:hover {
  border: 1px rgb(113, 113, 113) solid;
}
.card-head-op > span {
  width: 40px;
  height: 20px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px;
}
.card-head-op-left {
  display: flex;
  align-items: center;
  border-right: 1px rgb(240, 240, 240) solid;
  justify-content: center;
}
</style>